<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" dir="ltr" lang="en-gb"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Radio Cabs - <ui:insert name="title">title</ui:insert></title>
        <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
        <link rel="stylesheet" href="css/system.css" type="text/css"/>
        <link rel="stylesheet" href="css/theme.css" type="text/css"/>
        <link rel="stylesheet" href="css/shadowbox.css" type="text/css"/>
        <link rel="stylesheet" href="css/template.css" type="text/css"/>
        <link rel="stylesheet" href="css/sports.css" type="text/css"/>
        <link rel="stylesheet" href="css/custom.css" type="text/css"/>
        <!--<script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/tooltip.js"></script>
        <script type="text/javascript" src="js/base.js"></script>
        <script type="text/javascript" src="js/accordionmenu.js"></script>
        <script type="text/javascript" src="js/fancymenu.js"></script>
        <script type="text/javascript" src="js/template.js"></script>
        <script type="text/javascript" src="js/menu-animation.js"></script>-->
        <ui:insert name="head"></ui:insert>
    </h:head>

    <h:body>
        <div id="page" class="yoopage  column-right">
            <div id="absolute">
            </div>
            <div id="page-body">
                <div class="wrapper">
                    <div id="header">
                        <div id="toolbar">
                            <div id="date"><script>document.write(new Date().toLocaleDateString())</script></div>
                            <div class="left">
                                <div class="module mod-blank   first last">
                                    <ul class="menu menu-">		
                                    </ul></div>
                            </div>
                            <div class="right">
                                <div class="module mod-blank   first last">
                                    <a class="twitter" title="RadioCabs" href="" target="_blank">
                                        <img alt="Follow us on Twitter" src="img/toolbar_twitter.png" class="correct-png" height="25" width="25"/>
                                    </a>&nbsp;		
                                </div>
                            </div>
                        </div>
                        <div id="headerbar">
                        </div>
                        <div id="menubar">
                            <div class="menubar-2">
                                <div class="menubar-3"></div>
                            </div>
                        </div>
                        <div id="logo">
                            <img style="margin-left: -43px; margin-top: 7px; float: left;" alt="Hotline: +84 124 890 0047" src="img/logo.png"/>
                        </div>
                        <div id="menu">
                            <ul class="menu menu-dropdown">
                                <li id="home" class="level1 item1 first"><a href="index.xhtml" class="level1 item1 first"><span class="bg ">Home</span></a></li>
                                <li id="listing" class="level1 item3"><a href="Listing.xhtml" class="level1 item3"><span class="bg ">Listing</span></a></li>
                                <li id="driver" class="level1 item4"><a href="Drivers.xhtml" class="level1 item4"><span style="padding-top: 3px; height: 47px;" class="bg ">Drivers</span></a></li>
                                <li id="advertise" class="level1 item5"><a href="Advertise.xhtml" class="level1 item5"><span style="padding-top: 3px; height: 47px;" class="bg ">Advertise</span></a></li>
                                <li id="feedback" class="level1 item6 last"><a href="FeedBack.xhtml" class="level1 item6 last"><span style="padding-top: 3px; height: 47px;" class="bg ">Feed Back</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- header end -->
                    <div class="wrapper-body">
                        <div class="wrapper-t1">
                            <div class="wrapper-t2">
                                <div class="wrapper-t3"></div>
                            </div>
                        </div>
                        <div class="wrapper-1">
                            <div class="wrapper-2">
                                <div class="wrapper-3">
                                    <div class="wrapper-inner-1">
                                        <div class="wrapper-inner-2">
                                            <div id="middle">
                                                <div id="middle-expand">
                                                    <div id="main">
                                                        <div id="main-shift">
                                                            <div id="mainmiddle">
                                                                <div id="mainmiddle-expand">
                                                                    <div id="content">
                                                                        <div id="content-shift">
                                                                            <div class="floatbox">
                                                                                <div class="bfClearfix">
                                                                                    <div id="ff_formdiv34">                   
                                                                                        <style>
                                                                                            .bfClearfix:after {
                                                                                                content: "."; 
                                                                                                display: block; 
                                                                                                height: 0;  
                                                                                                clear: both; 
                                                                                                visibility: hidden;
                                                                                            }
                                                                                            .bfInline{
                                                                                                float:left;
                                                                                            }
                                                                                            .bfFadingClass{
                                                                                                display:none;
                                                                                            }
                                                                                        </style>
                                                                                        <div id="bfPage1" style="">
                                                                                            <ui:insert name="left"></ui:insert>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!-- content end -->
                                                                </div>
                                                            </div>
                                                            <!-- mainmiddle end -->
                                                        </div>
                                                    </div>
                                                    <div id="right">
                                                        <ui:insert name="right"></ui:insert>

                                                        <div class="module mod-rounded first ">
                                                            <h3 class="header">
                                                                <span class="header-2">
                                                                    <span class="header-3">
                                                                        <span class="icon icon-message"></span>Choose your city
                                                                    </span>
                                                                </span>
                                                            </h3>
                                                            <div class="box-t1">
                                                                <div class="box-t2">
                                                                    <div class="box-t3"></div>
                                                                </div>
                                                            </div>
                                                            <div class="box-1">
                                                                <div class="box-2">
                                                                    <div class="box-3 deepest with-header">
                                                                        <h:form id="form-search">
                                                                            <h:panelGrid columns="2" cellpadding="10" cellspacing="5" style="text-align: right">                                    
                                                                                <h:outputLabel value="Select City" style="font-weight: bold;font-size: 12px;padding: 9px"></h:outputLabel>
                                                                                <h:selectOneMenu id="selectedCity" value="#{companyController.citySearch}">
                                                                                    <f:selectItems value="#{driversController.listCity}"></f:selectItems>
                                                                                </h:selectOneMenu>
                                                                                &nbsp;
                                                                                <p:commandButton ajax="false" icon="ui-icon-search" value="Search" actionListener="#{companyController.searchByCity}" />
                                                                            </h:panelGrid>
                                                                        </h:form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="box-b1">
                                                                <div class="box-b2">
                                                                    <div class="box-b3"></div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="module mod-rounded" style="display: #{accountController.hideLogin}">

                                                            <h3 class="header">
                                                                <span class="header-2">
                                                                    <span class="header-3">
                                                                        <span class="icon icon-users"></span>Log In</span>
                                                                </span>
                                                            </h3>
                                                            <div class="box-t1">
                                                                <div class="box-t2">
                                                                    <div class="box-t3"></div>
                                                                </div>
                                                            </div>
                                                            <div class="box-1">
                                                                <div class="box-2">
                                                                    <div class="box-3 deepest with-header">
                                                                        <h:form id="form2" prependId="false">
                                                                            <p:messages globalOnly="true" showDetail="true" showSummary="false" autoUpdate="true" /> 
                                                                            <h:panelGrid columns="2" cellpadding="10" cellspacing="5">                                    
                                                                                <h:outputLabel value="Email: " style="font-weight: bold;font-size: 12px;"></h:outputLabel>
                                                                                <h:inputText value="#{accountBean.email}" id="rEMail" size="17" 
                                                                                             required="true" requiredMessage="Email can't be blank" />

                                                                                <h:outputLabel value="Password: " style="font-weight: bold;font-size: 12px;"></h:outputLabel>
                                                                                <h:inputSecret value="#{accountBean.password}" id="rPassword" size="17" 
                                                                                               required="true" requiredMessage="Password can't be blank" />

                                                                                &nbsp;
                                                                                <p:commandButton icon="ui-icon-transferthick-e-w" actionListener="#{accountController.checkValidUser}" value="Log in" update="form2" ></p:commandButton>
                                                                            </h:panelGrid>
                                                                        </h:form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="box-b1">
                                                                <div class="box-b2">
                                                                    <div class="box-b3"></div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="module mod-rounded" style="display: #{accountController.showBox}">

                                                            <h3 class="header">
                                                                <span class="header-2">
                                                                    <span class="header-3">
                                                                        <span class="icon icon-users"></span>Welcome ...</span>
                                                                </span>
                                                            </h3>
                                                            <div class="box-t1">
                                                                <div class="box-t2">
                                                                    <div class="box-t3"></div>
                                                                </div>
                                                            </div>
                                                            <div class="box-1">
                                                                <div class="box-2">
                                                                    <div class="box-3 deepest with-header">                                 
                                                                        <h:outputLabel value="Hi, #{sessionScope.account.email} !" style="font-weight: bold;font-size: 12px;padding: 9px"></h:outputLabel>
                                                                        <h:form id="form3">
                                                                            <ul>
                                                                                <li><p:commandLink value="Change your information" ajax="false" actionListener="#{accountController.changeInformation}" /></li>
                                                                                <li><p:commandLink value="Check payment" hreflang="Payment.xhtml" /></li>
                                                                                <li><p:commandLink value="See all enquiry" hreflang="Payment.xhtml" /></li>
                                                                                <li><p:commandLink value="Log out" onclick="confirmation.show()"/> </li>
                                                                            </ul>
                                                                            <p:confirmDialog id="confirmation" message="Are you sure to logout Your Account?"  
                                                                                             header="Notification" severity="alert" widgetVar="confirmation" > 
                                                                                <p:commandButton value="Yes Sure" ajax="false" oncomplete="confirmation.hide()"  
                                                                                                 actionListener="#{accountController.logoutAccount}" />  
                                                                                <p:commandButton value="Not Yet" onclick="confirmation.hide()" type="button" />   
                                                                            </p:confirmDialog>  
                                                                        </h:form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="box-b1">
                                                                <div class="box-b2">
                                                                    <div class="box-b3"></div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="module mod-rounded last">
                                                            <ui:repeat value="#{bannerController.enabledBanner}" var="b">
                                                                <a href="#{b.link}"><img border="0" src="#{b.image}" title="#{b.title}" alt="#{b.description}" style="margin: 0 0 12px 1px;" /></a>
                                                            </ui:repeat>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>	
                                    </div>
                                    <div class="wrapper-inner-b1-last"><div class="wrapper-inner-b2"><div class="wrapper-inner-b3"></div></div></div>
                                    <div id="footer">
                                        <a class="anchor" href="#page"></a>
                                        <table style="width: 538px;" border="0" cellpadding="0" cellspacing="0" align="center">
                                            <tbody>
                                                <tr>
                                                    <td height="57" valign="top" width="283"><img class="correct-png" src="img/logo-foot2.png" alt="Radio Cabs Team1" style="border: 0px none;" height="55" width="273"/></td>
                                                    <td valign="top" width="255">
                                                        <div align="left">
                                                            <span style="text-align: left;"><span>Copyright © 2012 <strong>Radio Cabs Team1</strong></span></span>™<span style="text-align: left;"><span><br /> </span>8 Ton That Thuyet, Cau Giay, Ha Noi City<br /> 
                                                                <span><img src="img/topmenu_item_bg.png" border="0" height="6" width="6"/> <a href="index.xhtml" target="_self" title="Home">Home</a></span>
                                                                <span><img src="img/topmenu_item_bg.png" border="0" height="6" width="6"/> <a href="Listing.xhtml" target="_self" title="Listing">Listing</a></span>
                                                                <span><img src="img/topmenu_item_bg.png" border="0" height="6" width="6"/> <a href="Drivers.xhtml" target="_self" title="Listing">Drivers</a></span>
                                                                <span><img src="img/topmenu_item_bg.png" border="0" height="6" width="6"/> <a href="FeedBack.xhtml" target="_self" title="Listing">Feed Back</a></span>
                                                            </span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- footer end -->
                                </div>
                            </div>
                        </div>
                        <div class="wrapper-b1">
                            <div class="wrapper-b2">
                                <div class="wrapper-b3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrapper">
            </div>
            <div id="shadowbox_overlay"></div>
            <div id="shadowbox_container">
                <div id="shadowbox">
                    <div id="shadowbox_title">
                        <div id="shadowbox_title_inner"></div>
                    </div>
                    <div id="shadowbox_body">
                        <div id="shadowbox_body_inner"></div>
                        <div id="shadowbox_loading"></div></div>
                    <div id="shadowbox_toolbar">
                        <div id="shadowbox_toolbar_inner"></div>
                    </div>
                </div>
            </div>
        </div>
    </h:body>
</html>